<template>
	<div class="fixed">

		<div class="title flex">
			<div class="return">
				<img @click="prev" src="../assets/image/return.png" />
			</div>
			<div class="add">
				创建优惠
			</div>
			<div class="publish" @click="onSubmit1">
				提交审核
			</div>
		</div>
		<div id="create_coupons">

			<el-form ref="form" :rules="rules" :model="form" class="demo-ruleForm create flex" :label-position="labelPosition"
			 @submit.native.prevent>
				<el-form-item label="优惠类型" prop="coupons_type">
					<el-select v-model="form.coupons_type" placeholder="优惠类型" style="width: 4.6956rem;">
						<el-option v-for="items in dataVal" :label="items.market_type_name" :value="items.market_type_id"></el-option>

					</el-select>
				</el-form-item>

				<el-form-item prop="coupons_money" v-if="form.coupons_type == '1' || form.coupons_type == ''" label="价值">
					<el-input v-model="form.coupons_money" class="price" style="width: 4.6956rem;" placeholder="￥"></el-input>
					<span style="color: #868E91;font-size: 0.56522rem;">元</span>
				</el-form-item>
				<el-form-item prop="coupons_discount" v-if="form.coupons_type=='2'" label="折券">
					<el-input class="zhe" style="width: 4.6956rem;" v-model="form.coupons_discount" placeholder="8.8"></el-input>
					<span style="color: #868E91;font-size: 0.56522rem;">折</span>
				</el-form-item>
				<el-form-item label="满足条件" prop="full_money" id="type">
					<el-input v-model="form.full_money" style="width: 4.6956rem;"></el-input><span style="color: #868E91;font-size: 0.56522rem;">&nbsp;&nbsp;元</span>
				</el-form-item>
				<el-form-item label="发放数量" prop="issue_number" id="type">
					<el-input v-model="form.issue_number" style="width: 4.6956rem;"></el-input><span style="color: #868E91;font-size: 0.56522rem;">&nbsp;&nbsp;张</span>
				</el-form-item>
				<el-form-item label="使用日期" required id="data">

					<el-date-picker prop="coupons_start_time" type="date" placeholder="开始日期" :picker-options="pickerOptionsStart"
					 v-model="form.coupons_start_time" style="width: 4.6956rem;"></el-date-picker>

					<span style="color: #868E91;">&nbsp;—&nbsp;</span>

					<el-date-picker prop="coupons_end_time" type="date" placeholder="结束日期" :picker-options="pickerOptionsEnd" v-model="form.coupons_end_time"
					 style="width: 4.6956rem;"></el-date-picker>

				</el-form-item>
				<el-form-item label="每人限领" prop="limit_number" id="pice">
					<el-input v-model="form.limit_number" style="width: 4.6956rem;"></el-input><span style="color: #868E91;font-size: 0.56522rem;">&nbsp;&nbsp;张</span>
				</el-form-item>
				<el-form-item label="使用说明" id="desc" prop="use_desc">

					<el-input style="margin: auto;" type="textarea" v-model="form.use_desc"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<div class="mask">
			<div class="tip flex">
				<div class="tip_title flex">
					<div>

					</div>
					<div>
						确定退出此页面
					</div>
					<img @click="quxiao" src="../assets/image/chahao.png" />

				</div>

				<div class="tip_btn flex">
					<div class="queding" @click="draft">
						存草稿
					</div>
					<div class="quxiao" @click="back">确定</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dataVal: '',
				labelPosition: 'top',
				quan: "1",
				coupons_name: {},
				form: {
					market_store_id:localStorage.getItem("store_id"),
					coupons_start_time: '',
					coupons_end_time: '',
					coupons_type: '',
					coupons_money: '',
					coupons_discount: '',
					full_money: '',
					issue_number: '',
					limit_number: '',
					use_desc: '',
					key:localStorage.getItem("key")
				},
				rules: {
					coupons_type: [{
							required: true,
							message: '请选择优惠名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					coupons_start_time: [{
						type: 'date',
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					coupons_end_time: [{
						type: 'date',
						required: true,
						message: '请选择时间',
						trigger: 'change'
					}],
					use_desc: [{
						required: true,
						message: '请填写使用说明',
						trigger: 'blur'
					}],
					coupons_discount: [{
						required: true,
						message: '请填写折券',
						trigger: 'blur'
					}],
					coupons_money: [{
						required: true,
						message: '请填写价格',
						trigger: 'blur'
					}],
					full_money: [{
						required: true,
						message: '请填写满足条件',
						trigger: 'blur'
					}],
					issue_number: [{
						required: true,
						message: '请填写张数',
						trigger: 'blur'
					}],
					limit_number: [{
						required: true,
						message: '请填每人限制领取',
						trigger: 'blur'
					}]
				},
				pickerOptionsStart: {
					disabledDate: time => {
						let endDateVal = this.form.coupons_end_time;
						if (endDateVal) {
							return time.getTime() > new Date(endDateVal).getTime();
						}
					}
				},
				pickerOptionsEnd: {
					disabledDate: time => {
						let beginDateVal = this.form.coupons_start_time;
						if (beginDateVal) {
							return (time.getTime() < new Date(beginDateVal).getTime() + 1 * 24 * 60 * 60 * 1000);
						}
					}
				}

			}

		},
		created: function() {
			this.onSubmit()
		},
		methods: {
			onSubmit() {
				var _this = this;
				console.log(_this.form)
				_this.$http.get(_this.baseURL + '/index.php/waveguest/market/add_market'+"?key="+_this.form.key).then(response => {
					this.dataVal = response.data.data
				}).catch(error => {

				});
			},
			onSubmit1() { //提交创建优惠券
				var _this = this;
				if (_this.form.coupons_type == 1) {
					var coupons_name = {
						' coupons_name': '满' + _this.form.full_money + '减' + _this.form.coupons_money
					}
					delete(_this.form["coupons_discount"]);
					var dat = $.extend(coupons_name, _this.form)
				} else if (_this.form.coupons_type == 2) {
					var coupons_name = {
						' coupons_name': '满' + _this.form.full_money + '折扣' + _this.form.coupons_discount
					}
					delete(_this.form["coupons_money"]);
					var dat = $.extend(coupons_name, _this.form)
				}
				// var dat = $.extend(coupons_name,_this.form);
				console.log(dat)
				var arr = []
				for (let i in _this.form) {
					arr.push(_this.form[i]); //值
				}
				var b = arr.every(function(current, index, array) {
					return current != '';
				})
				if (b ==true) {
					if(_this.form.coupons_type == 2){
					 var reg = /^([0-9])(\.[0-9])?$/;
					if (reg.test(_this.form.coupons_discount)) {
					} else {
						 this.$message.error('请输入正确折券形式~');
						return ;
				}
					}
					
					var qs = require('qs');
					_this.$http.post(_this.baseURL + '/index.php/waveguest/market/add_market', qs.stringify(dat)).then(response => {
						console.log(response)
						if(response.data.data=="1"){
						this.$message.success('提交成功');
						 this.$router.push({
						path: '/active'
					});
					}else{
						this.$message.error('提交失败');
					}
					
					}).catch(error => {

					});
				} else {
					_this.$message({
						message: '内容不能为空，请补全信息',
						type: 'warning',
						offset: 250
					});
				}
			},
			draft() { //存草稿
				var _this = this;
				if (_this.form.coupons_type == 1) {
					var coupons_name = {
						' coupons_name': '满' + _this.form.full_money + '减' + _this.form.coupons_money,
						"coupons_status": "3"
						
					}
				} else if (_this.form.coupons_type == 2) {
					var coupons_name = {
						' coupons_name': '满' + _this.form.full_money + '折扣' + _this.form.coupons_discount,
						"coupons_status": "3"
					
					}
				}else{
					 this.$message.error('请先选择优惠类型才能存草稿哦~');
					 return;
				}
				var data = $.extend(coupons_name, _this.form);
				console.log(data)
				var qs = require('qs');
				_this.$http.post(_this.baseURL + '/index.php/waveguest/market/add_market', qs.stringify(data)).then(response => {
					if(response.data.data=="1"){
						this.$message.success('存草稿成功');
						 this.$router.push({
						path: '/active'
					});
					}else{
						this.$message.error('存草稿失败');
					}
				}).catch(error => {

				});
			},
			edit() {
				var _this = this;
				var qs = require('qs');
				var id = _this.$route.query.id
				console.log(id)
				_this.$http.post(_this.baseURL + '/index.php/waveguest/market/market_one_detail', qs.stringify({
					'market_id': id,
					"key":localStorage.getItem("key")
				})).then(response => {
					console.log(response)
					_this.form = response.data.data;
				}).catch(error => {

				});
			},
			back() {
				this.$router.go(-1)
			},
			quxiao() {
				$(".mask").css('display', 'none');
			},
			prev() {
				//				
				$(".mask").css('display', 'block');
			}
		},
		filters: {
			formatDate: function(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			}
		},
		mounted() {


			// console.log(this.$route.query.id)
			if (this.$route.query.id) {
				this.edit()
			}
			if (this.form.name == '1') {

				$(".zhe .el-form-item__error ").css('display', "none")
				//    		 console.log( $(".zhe .el-form-item__error "))
			} else {
				$(".price .el-form-item__error ").css('display', "none")
			}
		}
	}
</script>

<style>
		.el-message {
    min-width: 4rem;
    top: 40% !important;
}

	.create {
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.must {
		font-size: 0.5rem;
		border: 1px solid;
		float: left;
	}

	.el-form-item__label {
		width: 100% !important;
	}


	#desc {
		width: 90%;
	}

	#desc>.el-form-item__label {
		width: 100%;
		color: #868E91;
		font-size: 0.5217rem;
	}

	.el-textarea__inner {
		line-height: 3.5;
		background: #D1D5D8;
	}

	.el-input--suffix .el-input__inner {
		padding-right: 0px;
	}

	.el-col-2 {
		text-align: center;
	}

	#type {
		width: 40%;
	}

	#pice {
		width: 90%;
		color: #868E91;
		font-size: 0.5217rem;
	}

	#pice>.el-form-item__label {
		width: 100%;
		color: #868E91;
		font-size: 0.5217rem;

	}

	#type>.el-form-item__label {
		width: 100%;
		color: #868E91;
		font-size: 0.5217rem;
	}

	#type .el-input__inner {
		border-radius: 0.21739rem;
	}

	#data .el-form-item__label {
		width: 100%;
		color: #868E91;
		font-size: 0.5217rem;
	}

	#data {
		width: 90%;
	}

	#data .el-input__inner {
		border-radius: 0.21739rem;
	}

	.line {
		color: #868E91;
		text-align: center;
		font-size: 0.4rem;
	}
</style>
<style scoped="scoped">
	#create_coupons {
		margin: 20px;
		background: white;
		border-radius: 0.5rem;
	}

	.mask {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		transition: all 0.2s ease-in;
		z-index: 99;
		display: none;

	}

	.tip {
		position: fixed;
		left: 50%;
		top: 50%;
		width: 13.78260rem;
		height: 6.69565rem;
		margin-top: -3.3478rem;
		margin-left: -6.89282rem;
		background: white;
		border-radius: 0.5rem;
		flex-direction: column;
	}

	.tip_title {
		width: 90%;
		padding: 5%;
		font-size: 0.7826rem;
		justify-content: space-between;
		line-height: 2rem;
	}

	.tip_title img {
		width: 0.565212rem;
		height: 0.565212rem;


	}

	.tip_btn {
		font-size: 0.6087rem;
		justify-content: space-between;
	}

	.queding,
	.quxiao {
		width: 4.9782rem;
		height: 1.3043rem;
		text-align: center;
		margin-top: 1.6rem;
		color: #868E91;
		line-height: 1.3043rem;

	}

	.quxiao {
		color: white;
		background: #007AFF;
		border-radius: 10px;
		margin-right: 1rem;
	}

	.queding {
		margin-left: 1rem;
	}

	.fixed {
		width: 100%;
		background: #F5F6FA;
	}

	.title {
		height: 2rem;
		font-size: 0.73913rem;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		padding: 0 5%;
		background: white;
		font-weight: 400;
	}

	.title>.return {
		width: 0.67391rem;
		height: 0.67391rem;
	}

	.title>.return>img {
		width: 0.67391rem;
		height: 0.67391rem;
	}

	.publish {
		color: #007AFF;
		font-size: 0.65217rem;
		font-weight: 400;
	}

	.el-message {
		min-width: 4rem;
		top: 40% !important;
	}

	/deep/.el-form--label-top .el-form-item__label {
		float: none;
		display: inline-block;
		text-align: left;
		padding: 0;
	}
</style>
